/*
 * 轮播图信息修改
 * @Author: LuoQianJun
 * @Date: 2018-01-26 14:34:14
 * @Last Modified by: ljb
 * @Last Modified time: 2018-01-31 14:59:50
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .ivu-form-item-content {
        img {
            width: 100%;
            height: 100%;
        }
    }

</style>
<template>
<div class="v-admin-carousel-edit">

    <Form ref="formValidate" :model="formValidate" :label-width="80">
         <Form-item label="图片" prop="image">
            <Upload :before-upload="file=>fileChange(file,'image','image_info')"
                    :on-remove="file=>fileChange(file,'image','image_info')"
                    :multiple="false"
                    accept="image/jpg, image/jpeg, image/png"
                    action="//fake_upload_url/">
                <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
                <div class="license-tip" slot="tip" v-if="image_info.name">{{ image_info.name }}</div>
            </Upload>  
            <div v-if="image_info.image">
                <img :src="image_info.image" @click="$emit('watch',carouselDetail.id)" alt="轮播图">
                <div>点击图片查看大图</div>
            </div>   
        </Form-item>

         <Form-item label="优先级" prop="priority">
            <InputNumber :max="9999" :min="0" v-model="formValidate.priority" placeholder="请输入优先级"></InputNumber>
        </Form-item>
        
        <Form-item>
            <Button type="primary" @click="updateCarousel">更新</Button>
        </Form-item>

    </Form>
</div>
</template>

<script>

import {validateFile} from 'src/validate';


export default {
    name: 'carousel-edit',

    props: ['carouselDetail'],
    
    data() {	
        return {

            formValidate : {

                _method : 'PUT',

                priority : 0,

                image : '',

            },                  //编辑信息时的表单

            // 上传的图片信息
            image_info : {

                name: '',

                image: '',

            },

        }
    },
    watch: {
        'carouselDetail' : function(){

            if( this.carouselDetail ) {
           
                // this.formValidate.image = this.carouselDetail.image;
                
                this.formValidate.priority = this.carouselDetail.priority;

                this.image_info.image = this.carouselDetail.image;
                
            }

        },  

    },
    methods: {

        /**
         * file类型input改变
         * @param  {Object} file {选择的文件对象}
         * @return {Boolean} {false则会停止上传}
         */
        fileChange(file,param,info){

            this[info].name = file.name;

            this[info].image = '';

            this.formValidate[param] = file;

            return false;

        },

        /**
         * 重置轮播图信息
         * @return {undefined}
         */
        resetCarouselInfo(){

            this.image_info.name = '';

        },

        /**
         * 更新轮播图信息
         * @return {undefined}
         */
        updateCarousel(){
            
            this.resetCarouselInfo();

            this.$emit('update',this.carouselDetail.id,this.formDataCreate());

        },

        /**
         * 手动拼接formdata数据
         * @return {Object}
         */
        formDataCreate(){

            const new_object = {

                _method : 'PUT',

                priority : this.formValidate.priority,

                image : this.formValidate.image

            };

            let form_data = new FormData();

            Object.keys(new_object).forEach((key)=>{

                if( new_object[key] ) {

                    form_data.append( key , new_object[key] );

                }
        
            });

            return form_data;

        }
        
    }
}
</script>